<template>
	<view class="main">
		<mx-navbar :title="'订单详情'"></mx-navbar>
		<view class="body" v-if="data.info.id">
			<view class="module">
				<view class="status">
					<text class="status-type">
						{{ info.state_name }}
					</text>
				</view>
				<view class="no">
					退款单号:{{ info.refund_sn }}
				</view>
			</view>

			<view class="module">
				<view class="gtop">
					<view class="gtop-tit">
						商品信息
					</view>
				</view>
				<view class="imglist">
					<view class="item" :key="index" v-for="(goods, index) in info.goods"
						@click="$go(`/pages/goods/index?id=${item.gid}`)">
						<image class="img-item" :src="$imgUrl + goods.image"></image>
						<view class="item-text">
							<view class="name">{{ goods.name }}</view>
							<view class="spec text-limit-2" v-if="goods.mdl">
								<text>已选：{{ goods.mdl }}</text>
							</view>
							<view class="num">
								<view class="order-price">
									<text class="n-price ">￥</text>{{ goods.original_price }}
								</view>
								<view>× {{ goods.count }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="module">
				<view class="title">退款信息</view>
				<view class="cell-group">
					<view class="cell-item">
						<view class="cell-lable">订单编号</view>
						<view class="cell-value">{{ info.order_sn }}</view>
					</view>
					<view class="cell-item">
						<view class="cell-lable">申请时间</view>
						<view class="cell-value">{{ info.create_time }}</view>
					</view>
					<view class="cell-item" v-if="info.refund_time">
						<view class="cell-lable">退款时间</view>
						<view class="cell-value">{{ info.refund_time }}</view>
					</view>
                    <view class="cell-item">
						<view class="cell-lable">实退金额</view>
						<view class="cell-value mprice">{{ info.apply_amount }}</view>
					</view>
					<view class="cell-item">
						<view class="cell-lable">退款类型</view>
						<view class="cell-value">{{ info.type_name }}</view>
					</view>

					<view class="cell-item">
						<view class="cell-lable">退款原因</view>
						<view class="cell-value">{{ info.reason }}</view>
					</view>


				</view>
			</view>
		</view>

		<mx-special v-model="pn" :scroll_top="sh"></mx-special>
	</view>
</template>

<script setup>
const {
	proxy
} = getCurrentInstance()

const data = reactive({
	sn: '',
	info: {}
})
const { info } = toRefs(data)

onLoad((options) => {
	data.sn = options.sn || ''
})

onShow(()=> {
	getData()
})
async function getData() {
	let res = await proxy.$api('RefundDetail', {
		refund_sn: data.sn
	})
	if (res.code === 0) {
		data.info = res.data
	}
	setTimeout(() => {
		getContentHeight()
	}, 300);
}

const pn = ref(1)
onReachBottom(() => {
	pn.value += 1
})

const sh = ref(0)
function getContentHeight() {
	const query = uni.createSelectorQuery().in(proxy)
	query
		.select(`.body`)
		.boundingClientRect((res) => {
			sh.value = res && (res.height)
		})
		.exec()
}

</script>

<style lang="scss" scoped>
.body {
	padding: 20rpx;

	.module {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;

		margin-bottom: 20rpx;

		.status {
			text-align: center;
			font-size: 34rpx;
			color: $main_color;
			font-weight: 500;
		}

		.no {
			text-align: center;
			font-size: 28rpx;
			// font-weight: 500;
			padding: 20rpx 0;
		}

		.btn-group {
			width: 100%;
			height: auto;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.opt-btn {
				margin: 0 10rpx;
				background: $main_color;
				line-height: 64rpx;
				border: 1px solid #ececec;
				line-height: 64rpx;
				font-size: 24rpx;
				padding: 0 30rpx;
				color: #fff;

				&.cancel {
					background: none;
					color: #1f1f1f;
				}
			}
		}

		.gtop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f0f1f3;
			margin-bottom: 24rpx;
			padding-bottom: 24rpx;

			.gtt {
				font-size: 24rpx;
			}
			.cuIcon{
				font-size: 24rpx;
			}

			.gtop-tit {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #000;

			}
		}

		.imglist {
			flex-grow: 1;
			overflow: hidden;
			text-align: left;

			.img-item {
				width: 176rpx;
				height: 176rpx;
				margin-right: 16rpx;
				flex-grow: 0;
			}

			.item {
				display: flex;
				width: 100%;
				border-bottom: 1px solid #f0f1f3;
				padding-bottom: 24rpx;
				margin-bottom: 24rpx;
				position: relative;

				&:last-child {
					// margin-bottom: 0;
					// border-bottom: none;
					// padding-bottom:0;
				}

				.item-text {
					flex: 1;
					position: relative;

					.name {
						width: 100%;
						display: -webkit-box;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						color: #1f1f1f;
						font-size: 24rpx;
						line-height: 36rpx;
						margin-bottom: 10rpx;
						padding: 2rpx 0;
					}

					.spec {
						width: 100%;
						color: #999999;
						font-size: 22rpx;
						position: relative;
						margin-bottom: 10rpx;
					}

					.num {
						display: flex;
						justify-content: space-between;
						flex: 1;
						font-size: 24rpx;
						position: absolute;
						width: 100%;
						bottom: 10rpx;
						left: 0;

						.order-price {
							font-size: 28rpx;
							color: #f00;

							.n-price {
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}

		.operate {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.product-details {
				flex: 1;
				// padding: 0 0 24rpx;
				text-align: right;
				font-size: 26rpx;
				color: #666;

				.pi {
					font-size: 20rpx;
					color: #f00;
				}

				.pn {
					font-size: 30rpx;
					color: #f00;
				}
			}

		}

		.title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 34rpx;
		}

		.cell-group {
			.cell-item {
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 36rpx;

				.cell-lable {
					width: 200rpx;
					font-size: 26rpx;
					color: #999;
				}

				.cell-value {
					flex: 1;
					font-size: 28rpx;
					text-align: right;
				}
			}
		}
	}

	.com {
		width: 100%;
		height: auto;
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx 24rpx 0;

		.ct {
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			padding-bottom: 24rpx;

			.trt,
			.tri {
				font-size: 24rpx;
				font-weight: normal;
				color: #666;
			}
		}

		.ci-item {
			color: #000;
			display: flex;
			padding-bottom: 24rpx;
			padding-left: 24rpx;
			align-items: center;

			.citem-l {
				width: 130rpx;
				font-size: 26rpx;
			}

			.citem-r {
				flex: 1;
				font-size: 26rpx;
			}

			.phone {
				margin-left: 30rpx;
			}

			.cuaddr {
				align-items: flex-start;
				position: relative;
				top: 2rpx;
			}
		}
	}
}
</style>